<template>
  <div id="app">
    <nav>
      <!-- 编程式路由 -->
      <button @click="aboutBtn">关于我们跳转</button>
      <button @click="detailBtn">详情页面跳转</button>
    </nav>
    <!-- 将router-view组件作为挂载点,切换不同的路由页面 -->
    <router-view/>
  </div>
</template>

<script>
  export default {
    components: {
    },
    methods:{
      // 声明式路由: ?携带参数   /携带参数 
      //            $route.query  $route.params
      // 编程式路由:  query path   params  name
                //  $route.query $route.params
      aboutBtn(){
        // 跳转
        // 传递
        this.$router.push({
          path:'/about',
          query:{
            title:'主页编程式跳转'
          }
        })

      },
      detailBtn(){
        this.$router.push({
          // path:'/detailview',
          name:'detailview',
          params:{
           goodsId:'goods002'
          }
        })
      }
    },
  }
</script>





<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
